<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>作业管理系统</title>
  <link rel="stylesheet" href="../../../css/animate.css">
  <script src="../../../js/vue.js"></script>
  <style>
    body {
      margin: 0; 
      padding: 0;
      font-family: Arial, sans-serif;
      background: #f2f2f2;
    }
    .container {
      width: 600px;
      margin: 40px auto;
      background: #fff;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      padding: 20px 30px;
    }
    h1 {
      text-align: center;
      margin-bottom: 20px;
    }

    /* 输入区样式 */
    .input-area {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }
    .input-area input {
      width: 45%;
      padding: 8px;
      font-size: 14px;
    }
    .input-area button {
      padding: 8px 16px;
      font-size: 14px;
      cursor: pointer;
      border: none;
      border-radius: 4px;
      background-color: #3498db;
      color: #fff;
    }
    .input-area button:hover {
      opacity: 0.85;
    }

    /* 列表样式 */
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .task-item {
      background: #fafafa;
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 4px;
      border: 1px solid #eee;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
    }
    .task-info {
      width: 60%;
    }
    .task-info h3,
    .task-info p {
      margin: 2px 0;
    }
    .task-actions {
      display: flex;
      gap: 8px;
    }
    .task-actions button {
      padding: 6px 12px;
      font-size: 13px;
      cursor: pointer;
      border: none;
      border-radius: 3px;
    }
    .edit-mode {
      background-color: #fff7e6;
    }

    /* 删除、提交、修改按钮的不同颜色 */
    .btn-delete {
      background-color: #e74c3c; 
      color: #fff;
    }
    .btn-edit {
      background-color: #f39c12; 
      color: #fff;
    }
    .btn-submit {
      background-color: #2ecc71; 
      color: #fff;
    }

    /* 提示语 */
    .no-task {
      text-align: center;
      color: #999;
      margin-top: 20px;
      font-style: italic;
    }

    /* 编辑输入框样式 */
    .edit-input {
      width: 45%;
      padding: 5px;
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
  <div id="app" class="container">
    <h1>简易作业管理系统</h1>

    <!-- 输入区域：标题 + 内容 + 按钮 -->
    <div class="input-area">
      <input type="text" v-model="newTitle" placeholder="作业名称">
      <input type="text" v-model="newContent" placeholder="作业内容">
      <button @click="addTask">添加作业</button>
    </div>

    <!-- 如果列表为空，则显示提示 -->
    <p class="no-task" v-if="tasks.length === 0">暂时还没有任何作业哟~</p>

    <!-- 使用 transition-group 给每个作业项添加、删除时的动画 -->
    <transition-group
      name="fade"
      tag="ul"
      enter-active-class="animate__animated animate__fadeIn"
      leave-active-class="animate__animated animate__fadeOut"
    >
      <li
        v-for="(task, index) in tasks"
        :key="task.id"
        class="task-item"
        :class="{'edit-mode': task.isEditing}"
      >
        <!-- 如果是编辑状态，则显示编辑的输入框，否则显示文字 -->
        <div class="task-info" v-if="!task.isEditing">
          <h3>
            {{ task.title }} 
            ({{ task.submitted ? '已提交' : '未提交' }})
          </h3>
          <p>{{ task.content }}</p>
        </div>
        <div class="task-info" v-else>
          <input class="edit-input" type="text" v-model="task.title" />
          <input class="edit-input" type="text" v-model="task.content" />
        </div>

        <!-- 操作按钮组 -->
        <div class="task-actions">
          <button 
            class="btn-edit" 
            v-if="!task.isEditing"
            @click="editTask(task)"
          >修改</button>
          <button 
            class="btn-edit" 
            v-else
            @click="saveTask(task)"
          >保存</button>

          <button 
            class="btn-submit"
            @click="toggleSubmit(task)"
          >
            {{ task.submitted ? '撤销' : '提交' }}
          </button>
          <button 
            class="btn-delete"
            @click="deleteTask(index)"
          >删除</button>
        </div>
      </li>
    </transition-group>
  </div>
  
  <script>
    new Vue({
      el: '#app',
      data: {
        // 表单绑定值
        newTitle: '',
        newContent: '',
        // 模拟作业列表
        tasks: [
          // 初始示例任务
          { id: 1, title: '高数作业', content: '第5章课后题1~10', submitted: false, isEditing: false },
          { id: 2, title: '英语作文', content: '写一篇周末游记', submitted: false, isEditing: false }
        ],
        nextId: 3
      },
      methods: {
        // 添加作业
        addTask() {
          const title = this.newTitle.trim();
          const content = this.newContent.trim();

          if (!title || !content) {
            alert('请同时输入作业名称和内容哦~');
            return;
          }
          // 把新作业追加到 tasks 列表中
          this.tasks.push({
            id: this.nextId++,
            title: title,
            content: content,
            submitted: false,
            isEditing: false
          });
          // 清空输入框
          this.newTitle = '';
          this.newContent = '';
        },
        // 删除作业
        deleteTask(index) {
          // 弹个简单的确认提示
          if (confirm('确定要删除这个作业吗？')) {
            this.tasks.splice(index, 1);
          }
        },
        // 切换编辑模式
        editTask(task) {
          task.isEditing = true;
        },
        // 保存修改
        saveTask(task) {
          // 结束编辑模式
          task.isEditing = false;
        },
        // 提交 or 撤销提交
        toggleSubmit(task) {
          task.submitted = !task.submitted;
        }
      }
    });
  </script>
</body>
</html>
